<template>
	<t-drawer
		title="列表显示设置"
		placement="right"
		:width="400"
		:visible="visible"
		@close="() => { $emit('cancel') }"
	>
		<div>
			<draggable
			  tag="div"
			  class="draggable-box"
			  v-bind="{
			    group: 'form-draggable',
			    ghostClass: 'moving',
			    animation: 180,
			    handle: '.drag-move',
			  }"
			  v-model="list"
				@end="batchDraggableEnd"
			>
			  <transition-group tag="div" name="list" class="list-main">
					<div v-for="(item,index) in list" :key="item.dataIndex" class="drag-move">
						<div class="drag-move-box">
							<span class="drag-box">
								<a-icon type="drag" />
							</span>
							<span>
								{{item.title}}
							</span>
							<a-checkbox
								v-if="item.dataIndex === 'selectAllKey'"
								:indeterminate="indeterminate"
								:checked="checkAll"
								@change="onCheckAllChange"
							/>
							<a-checkbox
								v-else
								:checked="item.visible"
								:value="item.dataIndex"
								@change="e => checkboxChange(e,index)"
							/>
						</div>
					</div>
			  </transition-group>
			</draggable>
		</div>
		<div :style="{
				background:'rgba(255,255,255,1)',
				position: 'absolute',
				right: 0,
				bottom: 0,
				width: '100%',
				borderTop: '1px solid #e9e9e9',
				padding: '10px 16px',
				textAlign: 'right',
				zIndex: 1,
			}">
			<a-button :style="{ marginRight: '8px' }" @click="() => { $emit('cancel') }">
				取消
			</a-button>
			<a-button type="primary" @click="handleOk">
				确认
			</a-button>
		</div>
	</t-drawer>
</template>

<script>
	import draggable from "vuedraggable";
	import { deepClone } from "@/utils/index.js";
	export default {
		name: 'ColumnSort',
		props: {
			visible: {
				type: Boolean,
				default: () => false
			},
			columns: {
				type: Array,
				default: () => []
			}
		},
		components: {
			draggable
		},
		data() {
			return {
				list: [],
				beginData: null,
				endingData: null,
				indeterminate: false,
				checkAll: false,
			}
		},
		created() {
			this.columns.forEach(item => {
				if(item.type === "serial"){
					this.beginData = item;
				}
				if(item.dataIndex === "action"){
					this.endingData = item;
				}
			});
			this.list = this.columns.filter((col) => col.type !== "serial" && col.dataIndex !== "action");
			this.list.forEach(item => {
				item.visible = true
			});
			// this.list.unshift({
			// 	title: "全选",
			// 	dataIndex: "selectAllKey"
			// });
		},
		watch: {
			visible: function(newVal) {
				if(newVal){
					const list = localStorage.getItem("columns_" + this.$route.name);
					if(list){
						this.list = JSON.parse(list);
						this.list = this.list.filter((col) => col.type !== "serial" && col.dataIndex !== "action");
					}
				}
			}
		},
		methods: {
			batchDraggableEnd(e){
				
			},
			handleOk(){
				let list = deepClone(this.list);
				if(this.beginData){
					list.unshift(this.beginData);
				}
				if(this.endingData){
					list.push(this.endingData);
				}
				localStorage.setItem("columns_" + this.$route.name, JSON.stringify(list));
				this.$bus.$emit('updateTableColumns', list);
				this.$emit('ok', list);
			},
			onCheckAllChange(e){
				this.list.forEach(item => {
					item.visible = e.target.checked
				})
				Object.assign(this, {
					indeterminate: false,
					checkAll: e.target.checked,
				});
			},
			checkboxChange(e,index){
				this.list[index].visible = e.target.checked;
				let item = this.list[index];
				item.visible = e.target.checked;
				this.$set(this.list, index, item);

				// const checkedList = this.list.filter((col) => col.dataIndex !== "selectAllKey").map(e => {return e.checked === true});
				// this.indeterminate =  !!this.list && (this.list.length - 1) === checkedList.length;
				// this.checkAll = (this.list.length - 1) === checkedList.length;
			}
		}
	}
</script>

<style lang="less" scoped>
	@primary-color: @primary-color;
	@primary-light-bg-color: fade(@primary-color, 8%);
	

	.drag-move-box{
		border-bottom: 1px solid #e2e0e0;
		outline-offset: 0;
		box-sizing: border-box;
		padding: 8px;
		transition: all 0.3s;
		min-height: 36px;
		width: 100%;
		cursor: pointer;
		.drag-box{
			cursor: move;
			margin-right: 5px;
		}
		.ant-checkbox-wrapper{
			float: right;
		}
	}
	.drag-move-box:hover{
		background: @primary-light-bg-color;
		outline-offset: 0;
	}
</style>
